<!--
  - Copyright (c) 2018-2019.
  -  This file is part of the moonpie production
  -  (c) johnzhang <875010341@qq.com>
  -  This source file is subject to the MIT license that is bundled
  -  with this source code in the file LICENSE.
  -->
<!-- 模板发送页面 -->

<template>
    <base-form v-bind:collect-form-data="this.onCollectFormData">
        <template v-slot:main>
            <div class="am-form-group">
                <label class="am-form-label am-u-sm-2 am-u-lg-2 form-require">用户</label>
                <div class="am-u-sm-10 am-u-end">
                    <select class="select-send-user">
                        <option v-for="user in users" v-bind:value="user.id">{{user.text}}</option>
                    </select>
                </div>
            </div>
            <template-content-config ref="main" v-bind:init-config="initConfig" v-bind:tmpl-data="templateData"/>
        </template>
    </base-form>
</template>

<script>
  require('select2/dist/js/select2.min')
  require('select2/dist/css/select2.min.css')
  import BaseForm              from '@/backend/components/basic/BaseForm'
  import TemplateContentConfig from '@/plugin/wechat_account/assets/components/TemplateContentConfig'

  export default {
    name: "TemplateSendConfig",
    props: ['templateData', 'initConfig'],
    methods: {
      onCollectFormData() {
        return {
          submit_data: {
            template: this.$refs.main.template,
            users: this.users
          }
        }
      },
      initUserChooser() {
        const $chooser = $(this.$el).find('.select-send-user')
        $chooser.select2({
          placeholder: '请选择用户信息',
          minimumInputLength: 2,
          multiple: true,
          tags: true,
          createTag(params) {
            if (params.term.length > 0) {
              let item = {id: params.term, text: '自定义用户:' + params.term, openid: params.term}
              return item
            }
            return null
          }
        })
        //选择后，完善this.users
        $chooser.on('select2:select', this.onUserChooserSelect.bind(this))
        //清除后，同步this.users
        $chooser.on('select2:clear', this.onUserChooserClear.bind(this))
        //取消后，数据同步
        $chooser.on('select2:unselect', this.onUserChooserUnselect.bind(this))
      },
      onUserChooserSelect(e) {
        const {data} = e.params
        //如果存在ID就忽略
        if(!_.includes(this.users, {id: data.id})) {
          this.users.push({id: data.id})
        }
      },
      onUserChooserClear(e) {
        this.users = []
      },
      onUserChooserUnselect(e) {
        const {data} = e.params
        console.log('remove item is', data)
        const idx = _.findIndex(this.users, {id: data.id})
        if(idx >= 0) {
          this.users.splice(idx, 1)
        }
      }
    },
    mounted() {
      this.initUserChooser()
    },
    data() {
      return {
        users: []
      }
    },
    components: {BaseForm, TemplateContentConfig}
  }
</script>

<style scoped>

</style>